﻿@page "/components/actionbutton"
@page "/components/action-button"

<PageOutlet Url="components/actionbutton"
            Title="ActionButton"
            Description="ActionButton component of the bit BlazorUI components" />

<DemoPage Name="ActionButton"
          Description="A lightweight and special type of button/link with icon-first styling, sized presets, and colorized text/icon support."
          Parameters="componentParameters"
          SubClasses="componentSubClasses"
          SubEnums="componentSubEnums"
          GitHubUrl="Buttons/ActionButton/BitActionButton.razor"
          GitHubDemoUrl="Buttons/ActionButton/BitActionButtonDemo.razor">
    <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
        <div>Explore the core features of the BitActionButton to get a feel for its baseline behavior.</div>
        <br />
        <BitActionButton IconName="@BitIconName.AddFriend">
            Create account
        </BitActionButton>
        <br />
        <BitActionButton IconPosition="BitIconPosition.End" IconName="@BitIconName.AddFriend">
            End Icon
        </BitActionButton>
        <br />
        <BitActionButton IconName="@BitIconName.AddFriend" IsEnabled="false">
            Disabled
        </BitActionButton>
        <br />
        <BitActionButton IconName="@BitIconName.AlarmClock" AriaLabel="Call">
            AriaLabel
        </BitActionButton>
        <br />
        <BitActionButton>
            No Icon
        </BitActionButton>
        <br />
        <BitActionButton IconOnly IconName="@BitIconName.Phone">
        </BitActionButton>
    </DemoExample>

    <DemoExample Title="IconPosition" RazorCode="@example2RazorCode" Id="example2">
        <div>Pick where the icon sits relative to the content: leave it at the start (default) or move it to the end without changing your content order.</div>
        <br />
        <div class="example-content">
            <BitActionButton IconPosition="BitIconPosition.Start" IconName="@BitIconName.AddFriend">
                Start (default)
            </BitActionButton>

            <BitActionButton IconPosition="BitIconPosition.End" IconName="@BitIconName.AddFriend">
                End
            </BitActionButton>
        </div>
    </DemoExample>

    <DemoExample Title="Href" RazorCode="@example3RazorCode" Id="example3">
        <div>Turn ActionButton into a link and choose whether it opens in the current tab or a new one.</div>
        <br />
        <div class="example-content">
            <BitActionButton IconName="@BitIconName.Globe" Href="https://bitplatform.dev" Target="_blank">
                Open bitplatform.dev in a new tab
            </BitActionButton>

            <BitActionButton IconName="@BitIconName.Globe" Href="https://github.com/bitfoundation/bitplatform">
                Go to bitplatform GitHub
            </BitActionButton>
        </div>
    </DemoExample>

    <DemoExample Title="Rel" RazorCode="@example4RazorCode" Id="example4">
        <div>Attach rel attribute values (e.g., nofollow, noreferrer) when using ActionButton as an external link.</div>
        <br />
        <div class="example-content">
            <BitActionButton Rel="BitLinkRel.NoFollow" Href="https://bitplatform.dev" Target="_blank" IconName="@BitIconName.Globe">
                Open bitplatform.dev with a rel attribute (nofollow)
            </BitActionButton>

            <BitActionButton Rel="BitLinkRel.NoFollow | BitLinkRel.NoReferrer" Href="https://bitplatform.dev" Target="_blank" IconName="@BitIconName.Globe">
                Open bitplatform.dev with a rel attribute (nofollow & noreferrer)
            </BitActionButton>
        </div>
    </DemoExample>

    <DemoExample Title="Template" RazorCode="@example5RazorCode" Id="example5">
        <div>Drop richer content inside ActionButton with a custom template (text plus spinner in this example).</div><br />
        <div class="example-content">
            <BitActionButton IconName="@BitIconName.AddFriend">
                <div style="display:flex;gap:0.5rem;">
                    <b>This is a custom template</b>
                    <BitSpinnerLoading CustomSize="20" />
                </div>
            </BitActionButton>
        </div>
    </DemoExample>

    <DemoExample Title="ButtonType" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
        <div>See submit/reset/button types in action inside a validated form.</div>
        <br />
        <div class="form-container">
            @if (formIsValidSubmit is false)
            {
                <EditForm Model="buttonValidationModel" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit" novalidate>
                    <DataAnnotationsValidator />

                    <BitTextField Label="Required" Required @bind-Value="buttonValidationModel.RequiredText" />
                    <ValidationMessage For="() => buttonValidationModel.RequiredText" style="color:red" />
                    <br />
                    <BitTextField Label="Nonrequired" @bind-Value="buttonValidationModel.NonRequiredText" />
                    <br />
                    <div>
                        <BitActionButton IconName="@BitIconName.SendMirrored" ButtonType="BitButtonType.Submit">
                            Submit
                        </BitActionButton>
                        <BitActionButton IconName="@BitIconName.Reset" ButtonType="BitButtonType.Reset">
                            Reset
                        </BitActionButton>
                        <BitActionButton IconName="@BitIconName.ButtonControl" ButtonType="BitButtonType.Button">
                            Button
                        </BitActionButton>
                    </div>
                </EditForm>
            }
            else
            {
                <BitMessage Color="BitColor.Success">
                    The form submitted successfully.
                </BitMessage>
            }
        </div>
    </DemoExample>

    <DemoExample Title="FullWidth" RazorCode="@example7RazorCode" Id="example7">
        <div>Stretch buttons or align content by combining FullWidth and an end-positioned icon.</div>
        <br />
        <BitActionButton FullWidth IconName="@BitIconName.NavigationFlipper">
            FullWidth
        </BitActionButton>
        <br />
        <BitActionButton FullWidth IconPosition="BitIconPosition.End" IconName="@BitIconName.Forward">
            FullWidth with end icon
        </BitActionButton>
    </DemoExample>

    <DemoExample Title="Color" RazorCode="@example8RazorCode" Id="example8">
        <div>Preview the predefined colors of the BitActionButton for icon and text, from primary through warning/error, and the background/foreground/border sets.</div>
        <br />
        <div>
            <div class="example-content">
                <BitActionButton Color="BitColor.Primary" IconName="@BitIconName.ColorSolid">
                    Primary
                </BitActionButton>
                <BitActionButton Color="BitColor.Primary">
                    Primary
                </BitActionButton>
            </div>
            <br />
            <div class="example-content">
                <BitActionButton Color="BitColor.Secondary" IconName="@BitIconName.ColorSolid">
                    Secondary
                </BitActionButton>
                <BitActionButton Color="BitColor.Secondary">
                    Secondary
                </BitActionButton>
            </div>
            <br />
            <div class="example-content">
                <BitActionButton Color="BitColor.Tertiary" IconName="@BitIconName.ColorSolid">
                    Tertiary
                </BitActionButton>
                <BitActionButton Color="BitColor.Tertiary">
                    Tertiary
                </BitActionButton>
            </div>
            <br />
            <div class="example-content">
                <BitActionButton Color="BitColor.Info" IconName="@BitIconName.ColorSolid">
                    Info
                </BitActionButton>
                <BitActionButton Color="BitColor.Info">
                    Info
                </BitActionButton>
            </div>
            <br />
            <div class="example-content">
                <BitActionButton Color="BitColor.Success" IconName="@BitIconName.ColorSolid">
                    Success
                </BitActionButton>
                <BitActionButton Color="BitColor.Success">
                    Success
                </BitActionButton>
            </div>
            <br />
            <div class="example-content">
                <BitActionButton Color="BitColor.Warning" IconName="@BitIconName.ColorSolid">
                    Warning
                </BitActionButton>
                <BitActionButton Color="BitColor.Warning">
                    Warning
                </BitActionButton>
            </div>
            <br />
            <div class="example-content">
                <BitActionButton Color="BitColor.SevereWarning" IconName="@BitIconName.ColorSolid">
                    SevereWarning
                </BitActionButton>
                <BitActionButton Color="BitColor.SevereWarning">
                    SevereWarning
                </BitActionButton>
            </div>
            <br />
            <div class="example-content">
                <BitActionButton Color="BitColor.Error" IconName="@BitIconName.ColorSolid">
                    Error
                </BitActionButton>
                <BitActionButton Color="BitColor.Error">
                    Error
                </BitActionButton>
            </div>
            <br /><br />
            <div style="background:var(--bit-clr-fg-ter);padding:1rem">
                <div class="example-content">
                    <BitActionButton Color="BitColor.PrimaryBackground" IconName="@BitIconName.ColorSolid">
                        PrimaryBackground
                    </BitActionButton>
                    <BitActionButton Color="BitColor.PrimaryBackground">
                        PrimaryBackground
                    </BitActionButton>
                </div>
                <br />
                <div class="example-content">
                    <BitActionButton Color="BitColor.SecondaryBackground" IconName="@BitIconName.ColorSolid">
                        SecondaryBackground
                    </BitActionButton>
                    <BitActionButton Color="BitColor.SecondaryBackground">
                        SecondaryBackground
                    </BitActionButton>
                </div>
                <br />
                <div class="example-content">
                    <BitActionButton Color="BitColor.TertiaryBackground" IconName="@BitIconName.ColorSolid">
                        TertiaryBackground
                    </BitActionButton>
                    <BitActionButton Color="BitColor.TertiaryBackground">
                        TertiaryBackground
                    </BitActionButton>
                </div>
            </div>
            <br />
            <div class="example-content">
                <BitActionButton Color="BitColor.PrimaryForeground" IconName="@BitIconName.ColorSolid">
                    PrimaryForeground
                </BitActionButton>
                <BitActionButton Color="BitColor.PrimaryForeground">
                    PrimaryForeground
                </BitActionButton>
            </div>
            <br />
            <div class="example-content">
                <BitActionButton Color="BitColor.SecondaryForeground" IconName="@BitIconName.ColorSolid">
                    SecondaryForeground
                </BitActionButton>
                <BitActionButton Color="BitColor.SecondaryForeground">
                    SecondaryForeground
                </BitActionButton>
            </div>
            <br />
            <div class="example-content">
                <BitActionButton Color="BitColor.TertiaryForeground" IconName="@BitIconName.ColorSolid">
                    TertiaryForeground
                </BitActionButton>
                <BitActionButton Color="BitColor.TertiaryForeground">
                    TertiaryForeground
                </BitActionButton>
            </div>
            <br /><br />
            <div class="example-content">
                <BitActionButton Color="BitColor.PrimaryBorder" IconName="@BitIconName.ColorSolid">
                    PrimaryBorder
                </BitActionButton>
                <BitActionButton Color="BitColor.PrimaryBorder">
                    PrimaryBorder
                </BitActionButton>
            </div>
            <br />
            <div class="example-content">
                <BitActionButton Color="BitColor.SecondaryBorder" IconName="@BitIconName.ColorSolid">
                    SecondaryBorder
                </BitActionButton>
                <BitActionButton Color="BitColor.SecondaryBorder">
                    SecondaryBorder
                </BitActionButton>
            </div>
            <br />
            <div class="example-content">
                <BitActionButton Color="BitColor.TertiaryBorder" IconName="@BitIconName.ColorSolid">
                    TertiaryBorder
                </BitActionButton>
                <BitActionButton Color="BitColor.TertiaryBorder">
                    TertiaryBorder
                </BitActionButton>
            </div>
        </div>
    </DemoExample>

    <DemoExample Title="Size" RazorCode="@example9RazorCode" Id="example9">
        <div>Compare the Small, Medium, and Large presets to gauge typography and padding differences.</div>
        <br />
        <div class="example-content">
            <BitActionButton Size="BitSize.Small" IconName="@BitIconName.FontSize">
                Small
            </BitActionButton>
            <BitActionButton Size="BitSize.Medium" IconName="@BitIconName.FontSize">
                Medium
            </BitActionButton>
            <BitActionButton Size="BitSize.Large" IconName="@BitIconName.FontSize">
                Large
            </BitActionButton>
        </div>
    </DemoExample>

    <DemoExample Title="Style & Class" RazorCode="@example10RazorCode" Id="example10">
        <div>Override look-and-feel with inline styles or custom CSS classes applied to the root, icon, and content.</div>
        <br />
        <div class="example-content column">
            <BitActionButton IconName="@BitIconName.Brush"
                             Styles="@(new() { Root = "font-size: 1.5rem;",
                                               Icon = "color: blueviolet;",
                                               Content = "text-shadow: aqua 0 0 1rem;" })">
                Action Button Styles
            </BitActionButton>

            <BitActionButton IconName="@BitIconName.FormatPainter"
                             Classes="@(new() { Root = "custom-root",
                                                Icon = "custom-icon",
                                                Content = "custom-content" })">
                Action Button Classes (Hover me)
            </BitActionButton>
        </div>
    </DemoExample>

    <DemoExample Title="RTL" RazorCode="@example11RazorCode" Id="example11">
        <div>View ActionButton inside a right-to-left layout, respecting RTL direction and icon/text ordering.</div>
        <br />
        <div dir="rtl">
            <BitActionButton Dir="BitDir.Rtl" IconName="@BitIconName.AddFriend">
                ساخت حساب
            </BitActionButton>
        </div>
    </DemoExample>
</DemoPage>

